<template>
	<view class="goodsCard">
		<view class="img">
			<image src="../../static/goods/goods1.png"></image>
		</view>
		<view class="content">
			<view class="title">
				{{goods.title}}
			</view>
			<view class="type">
				{{goods.desc}}
			</view>
			<view class="price">
				<view class="price_num">
					￥{{goods.price}}<text class="no_price">￥{{goods.oldPrice}}</text>
				</view>
				<view class="btn">
					加入购物车
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			goods:{
				type:Object,
				default:()=>{
					return {
						id:'',
						title:'',
						desc:'',
						price:'',
						oldPrice:'',
						img:''
					}
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.goodsCard {
		display: flex;
		padding: 40rpx 24rpx;

		.img {
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.content {
			padding: 0 16rpx;

			.title {
				font-size: 32rpx;
				font-weight: 700;
				letter-spacing: 0rpx;
				line-height: 44rpx;
				color: rgba(51, 51, 51, 1);
			}

			.type {
				height: 32rpx;
				opacity: 1;
				border-radius: 2rpx;
				background: rgba(255, 223, 221, 1);
				display: inline-block;
				padding: 8rpx 8rpx 8rpx 8rpx;
				font-size: 22rpx;
				letter-spacing: 0rpx;
				line-height: 32rpx;
				color: rgba(190, 46, 35, 1);
				margin-top: 10rpx;
			}

			.price {
				display: flex;
				align-items: flex-end;
				
				justify-content: space-between;

				.price_num {
					height: 28rpx;
					/** 文本1 */
					font-size: 28rpx;
					font-weight: 700;
					letter-spacing: 0rpx;
					line-height: 28rpx;
					color: rgba(246, 55, 71, 1);

					.no_price {
						font-size: 24rpx;
						color: rgba(153, 153, 153, 1);
						position: relative;
						margin-left: 8rpx;
					}

					.no_price::before {
						content: "";
						position: absolute;
						left: 0;
						top: 50%;
						width: 100%;
						height: 1px;
						background-color: currentColor;
						transform: translateY(-50%);
					}
				}

				.btn {
					width: 188rpx;
					height: 60rpx;
					opacity: 1;
					border-radius: 80rpx;
					background: linear-gradient(90deg, rgba(244, 6, 0, 1) 0%, rgba(255, 75, 22, 1) 100%);
					text-align: center;
					line-height: 58rpx;
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}
</style>